<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"          			
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <ui:composition template="TaskProLayout.xhtml">
        <ui:define name="content"> 
               <h:form id="currEnviromentPreview">
                   <div class="Post">
            <p:dataTable 
                var="enviroment" value="#{enviromentBean.loadedEnviroments}"  
                rowKey="#{enviroment.id}" paginator="true" paginatorAlwaysVisible="false" rows="30"
                rendered="#{enviromentBean.displayCurrEnv}">  
                <f:facet name="header">  
                    <p:commandButton value="Add" 
                                     ajax="true" oncomplete="enviromentAdd.show()"/>  
                </f:facet>  
                <p:column>  
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{enviroment.keyOfSetting}" >                             
                            </h:outputText>
                        </f:facet>  
                        <f:facet name="input">  
                            <p:inputText value="#{enviroment.keyOfSetting}" />  
                        </f:facet>  
                    </p:cellEditor>  
                </p:column>  
                <p:column>  
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{enviroment.valueOfSetting}" >
                            </h:outputText>
                        </f:facet>  
                        <f:facet name="input">  
                            <p:inputText value="#{enviroment.valueOfSetting}" />  
                        </f:facet>  
                    </p:cellEditor>         
                </p:column>  
                <p:column>  
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{enviroment.description}" >
                            </h:outputText>
                        </f:facet>  
                        <f:facet name="input">  
                            <p:inputTextarea value="#{enviroment.description}" />  
                        </f:facet>  
                    </p:cellEditor>                
                </p:column>   
                <p:column style="width: 120px" headerText="Options">  
                    <p:rowEditor />  
                    <p:commandButton value="remove" ajax="true" update=":currEnviromentPreview"
                                     action="#{enviromentBean.removeEnv(enviroment)}" />
                </p:column> 
                <f:facet name="footer">  
                    <p:commandButton value="Save" 
                                     ajax="true" action="#{enviromentBean.modifyEnviroments()}"/>  
                </f:facet>  
            </p:dataTable>  
                       
                   </div>
                     </h:form>
            <p:dialog header="Add setting" widgetVar="enviromentAdd" resizable="true"  modal="true"
                      width="400" height="300" dynamic="true" appendToBody="true">
                <div class="Post">
                    <h:form>
                <h:panelGrid id="display" columns="2" cellpadding="4" title="Add enviroment">  
                    <h:outputText value="Key"/>
                    <p:inputText value="#{enviromentBean.key}" />
                    <h:outputText value="Value"/>
                    <p:inputText value="#{enviromentBean.value}" />
                    <h:outputText value="Description"/>
                    <p:inputTextarea value="#{enviromentBean.description}"/>
                </h:panelGrid>      
                <p:commandButton value="Add" update=":currEnviromentPreview" action="#{enviromentBean.addEnv()}" 
                                 ajax="true" oncomplete="enviromentAdd.hide()"></p:commandButton>
                    </h:form>
                </div>
            </p:dialog>   
            <div class="Post">
        <h:form id="enviromentPreview">
            <p:dataTable 
                var="enviroment" value="#{enviromentBean.importedEnviroments}"  
                rowKey="#{enviroment.id}" paginator="true" paginatorAlwaysVisible="false" rows="10"
                rendered="#{enviromentBean.displayPreview}">  
                <f:facet name="header">  
                    Enviroment which will be imported to system
                </f:facet>  
                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Key" />  
                    </f:facet>  
                    <h:outputText value="#{enviroment.keyOfSetting}" />  
                </p:column>  
                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Value"/>
                    </f:facet>
                    <h:outputText value="#{enviroment.valueOfSetting}" />              
                </p:column>  
                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Description"/>
                    </f:facet>
                    <h:outputText value="#{enviroment.description}" />              
                </p:column>  
                <f:facet name="footer">  
                    <p:commandButton value="Save"   
                                     ajax="false" update=":currEnviromentPreview" action="#{enviromentBean.addImportedEnviroments()}"/>  
                </f:facet>  
            </p:dataTable>  
        </h:form>
            </div>
            <div class="Post">
        <h:form enctype="multipart/form-data" prependId="false">
            <h:outputText value="Import enviroment: *.xls" />
            <p:fileUpload  update=":enviromentPreview,:currEnviromentPreview" id="Upload"  fileUploadListener="#{enviromentBean.loadEnviroment}" allowTypes="/(\.|\/)(xls|xlsx)$/"  mode="advanced"   />

        </h:form>
            </div>
            </ui:define>
    </ui:composition>
</html>